/**
 * @description 阶段滑动条
 * @date 2024.9.10
 * @author wz
 * @midify 2025.5.15
 * @editor wz
 */
import { _decorator, Component, Node, NodeEventType, EventTouch, UITransform, v3, Slider, ProgressBar, Color, Label, EventHandler, Button, math, CCFloat } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CStepSlider')
export default class CStepSlider extends Component {

    @property(Slider)
    slider: Slider = null;

    @property(Node)
    sliderBg: Node = null;

    @property(ProgressBar)
    progressBar: ProgressBar = null;

    @property(Color)
    selColor: Color = new Color(147, 255, 165);

    @property(Color)
    norColor: Color = new Color(204, 204, 204);


    @property({ type: [CCFloat], step: 1, tooltip: '滑动对应的数值', displayName: '滑动对应的数值' })
    valueList: [] = [];


    @property({ type: [EventHandler], tooltip: '滑动响应事件', displayName: '滑动响应事件' })
    stepSliderEvents: EventHandler[] = [];

    private _interactable = true;

    private _value: number = 0;

    private _state: boolean = false;


    start() {
        this.node.on(NodeEventType.TOUCH_START, this.onTouchStart.bind(this));
        this.node.on(NodeEventType.TOUCH_MOVE, this.onTouchMove.bind(this));
        this.node.on(NodeEventType.TOUCH_END, this.onTouchEnd.bind(this));
        this.node.on(NodeEventType.TOUCH_CANCEL, this.onTouchCancel.bind(this));

        //防止点击被遮挡
        this.slider.enabled = false;
        this.slider.handle.getComponent(Button).enabled = false;
        this.progressBar.enabled = false;

        this.setValueByIndex(0);
    }

    /**
     * 通过索引设置值
     * @param index 
     */
    setValueByIndex(index: number) {
        let value = this.valueList[index];
        this.setValue(value);
    }

    /**
     * 
     * @param value 设置当前的值
     * @returns 
     */
    setValue(value: number) {
        let divide = 1 / (this.valueList.length - 1);
        let index = -1;
        for (let i = 0; i < this.valueList.length; i++) {
            if (this.valueList[i] == value) {
                this._value = value;
                this.slider.progress = i * divide;
                this.progressBar.progress = i * divide;
                index = i;
            }
        }
        if (index >= 0) {
            this.setSelectColor(index);
        }
        else {
            console.log("value is not correct :" + value);
        }
    }

    /**
     * 或当前的值
     * @returns
     */
    getValue(): number {
        return this._value;
    }

    private onTouchStart(data: EventTouch) {
        if (!this._interactable) return;
        this._state = true;
        let touch = data.getUILocation();
        let pos = this.sliderBg.getComponent(UITransform).convertToNodeSpaceAR(v3(touch.x, touch.y));
        let value = (pos.x + this.sliderBg.getComponent(UITransform).width / 2) / this.sliderBg.getComponent(UITransform).width;
        this.setSlider(value);
    }

    private onTouchMove(data: EventTouch) {
        if (!this._interactable) return;
        if (this._state) {
            let touch = data.getUILocation();
            let pos = this.sliderBg.getComponent(UITransform).convertToNodeSpaceAR(v3(touch.x, touch.y));
            let value = (pos.x + this.sliderBg.getComponent(UITransform).width / 2) / this.sliderBg.getComponent(UITransform).width;
            this.setSlider(value);
        }
    }

    private onTouchEnd(data: EventTouch) {
        if (!this._interactable) return;
        this._state = false;
        let touch = data.getUILocation();
        let pos = this.sliderBg.getComponent(UITransform).convertToNodeSpaceAR(v3(touch.x, touch.y));
        let value = (pos.x + this.sliderBg.getComponent(UITransform).width / 2) / this.sliderBg.getComponent(UITransform).width;
        this.setSlider(value);
        this.onStepEvent();
    }

    private onTouchCancel(data: EventTouch) {
        if (!this._interactable) return;
        this._state = false;
        this.onStepEvent();
    }

    private setSlider(value) {
        value = math.clamp01(value);
        let divide = 1 / (this.valueList.length - 1);
        let index = 0;
        for (let i = 0; i < this.valueList.length; i++) {
            if ((value >= i * divide - divide / 2) && (value < i * divide + divide / 2)) {
                this.slider.progress = i * divide;
                this.progressBar.progress = i * divide;
                this._value = this.valueList[i];
                index = i;
                break
            }
        }
        this.setSelectColor(index);
    }


    private setSelectColor(index) {
        let nodeLabels = this.getComponentsInChildren(Label);
        for (let i = 0; i < nodeLabels.length; i++) {
            nodeLabels[i].color = (index == i) ? this.selColor : this.norColor;
        }
    }

    private onStepEvent() {
        console.log("onStepEvent:" + this._value);
        this.stepSliderEvents.forEach((a) => {
            a.emit([this.node, this._value]);
        })
    }
}
